/**
 * 图片设置
 */
function scImageSetting(){
    var opt = null;
    var com = scCommon.instance();
    var crEle = com.crEle;

    var tab = new scTabx();

    /**
     * 属性选项
     */
    var items = [
        {label: "编码(id)：", value: "id", placeholder: "唯一编码"}, 
        {label: "名称：", value: "name", placeholder: "可重复"}, 
        {label: "宽度：", value: "width", type:"number"}, 
        {label: "高度：", value: "height", type:"number"},
        {label: "类型", children: [
            {label: "嵌入型", value: "position", type: "radio", position: "", checked: true},
            {label: "浮动型", value: "position", type: "radio", position: "absolute"}
        ]},
    ];

    var box = null;
    var listener = null;

    /**
     * 设置参数
     * @param {*} option 
     */
    this.setOption = function(option){
        opt = option;
    }

    /**
     * 创建视图
     */
    this.createView = function(option){
        box = crEle(null, "sc-image-setting");
        
        var t = tab.createView({
            menus: [
                {
                    label: "属性", 
                    value: "", 
                    selected: true,
                    component: {
                        createView: createPropsView.call(this, opt)
                    }
                },
                {
                    label: "脚本", 
                    value: "",
                    component: {
                        createView: createScript.call(this, opt)
                    }
                }
            ]
        });

        box.appendChild(t);
        
        return box;
    }

    /**
     * 创建属性视图
     * @param {*} option 
     * @returns 
     */
    var createPropsView = function(option){
        return ()=>{
            let wrap = crEle(null, "sc-image-setting");
        
            option = option ? option : {};
            listener = option.listener;
    
            var row = null;
            var label = null;
            var input = null;
            var data = opt && opt.data ? opt.data : null;
    
            var item = null;
            for(let i in items){
                item = items[i];
    
                row = crEle("div", "sc-image-setting-row");
                label = crEle("label");
                
                label.innerText = item.label;
    
                row.appendChild(label);
    
                if(item.children){
                    for(let j in item.children){
                        let child = item.children[j];
                        if(child.type == "radio"){
                            input = crEle("input");
                            input.setAttribute("type", "radio");
                            input.setAttribute("name", child.value);
                            input.checked = child.checked;
                            input.value = child.position;
    
                            label = crEle("label");
                            label.style.margin = "6px 6px 6px 0px";
                            label.innerText = child.label;
    
                            label.prepend(input);
                            row.appendChild(label);
                        }
                    }
                }else if(item.type == "number"){
                    let size = {
                        name: item.value,
                        value: data[item.value],
                        unit: "厘米",
                        maxNum: 20,
                        minNum: 0.2,
                        step: 0.1
                    };
    
                    let number = new scNumber();
                    row.appendChild(number.createView(size));
                }else{
                    input = crEle("input");
    
                    input.type = "text";
                    input.name = item.value;
                    input.placeholder = item.placeholder;
        
                    if(data && data[input.name] != undefined){
                        input.value = data[input.name];
                    }
        
                    row.appendChild(input);
                }
                
                wrap.appendChild(row);
            }
    
            return wrap;
        }
    }

    /**
     * 创建脚本视图
     * @param {*} node 
     */
    var createScript = function(option){
        return ()=>{
            var data = option ? option.data : null;
            var wrap = crEle("div", "sc-input-script");

            com.insertScript({
                component: this,
                node: wrap
            }, data, {
                row: "sc-image-setting-row",
            });
    
            return wrap;
        }
    }

    /**
     * 获取设置后的数据
     */
    this.getData = function(){
        return com.getData(box);
    }
}